import { defineAsyncComponent, h } from 'vue';

const AsyncComponent = (loader) => defineAsyncComponent({
  loader,
  errorComponent: () => h('div', { id: 'timeout' }, '网络环境异常，请刷新页面重试！！！'),
  loadingComponent: () => h('div', { id: 'loading' }, h('i', { class: 'el-icon-loading' })),
  timeout: 5000,
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // 请求发生错误时重试，最多可尝试 3 次
      retry()
    } else {
      // 注意，retry/fail 就像 promise 的 resolve/reject 一样：
      // 必须调用其中一个才能继续错误处理。
      fail()
    }
  }
})

export default AsyncComponent;